<template>
  <div class="box">
    <topLogin :isCenter="true"></topLogin>
    <topNav></topNav>
    <div class="wid-1200 main-box min-height">
      <!-- <centerNav :isCenterIndex="0"></centerNav> -->
      <div class="center-nav">
        <i class="user-avatar">
          <img src="@/assets/images/center-avatar.png" />
        </i>
        <p>{{userName}}</p>
        <ul>
          <li :class="{'active':isCenterIndex==0}" @click="isCenterIndex=0">
            <router-link to>
              <i>
                <img src="@/assets/images/icon-advisory.png" />
              </i>
              <i>
                <img src="@/assets/images/icon-advisory-active.png" />
              </i>
              <span>咨询记录</span>
            </router-link>
          </li>
          <li :class="{'active':isCenterIndex==1}" @click="isCenterIndex=1">
            <router-link to>
              <i>
                <img src="@/assets/images/icon-complaint.png" />
              </i>
              <i>
                <img src="@/assets/images/icon-complaint-active.png" />
              </i>
              <span>投诉记录</span>
            </router-link>
          </li>
          <li :class="{'active':isCenterIndex==2}" @click="isCenterIndex=2">
            <router-link to>
              <i>
                <img src="@/assets/images/icon-help.png" />
              </i>
              <i>
                <img src="@/assets/images/icon-help-active.png" />
              </i>
              <span>求助记录</span>
            </router-link>
          </li>
           <li :class="{'active':isCenterIndex==3}" @click="isCenterIndex=3">
            <router-link to>
              <i>
                <img src="@/assets/images/icon-member.png" />
              </i>
              <i>
                <img src="@/assets/images/icon-member-active.png" />
              </i>
              <span>个人信息</span>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="content-box">
        <ul v-show="isCenterIndex==0">
          <li v-for="(item , index) in advisoryItems" :key="index">
            <router-link to>
              <div>{{item.content}}</div>
              <p>
                <span>{{item.time}}</span>
              </p>
            </router-link>
          </li>
        </ul>
        <ul v-show="isCenterIndex==1">
          <li v-for="(item , index) in complaintItems" :key="index">
            <router-link to>
              <div>{{item.content}}</div>
              <p>
                <span>{{item.time}}</span>
                <i class="unprocessed" v-if="item.result == 0">未处理</i>
                <i class="processing" v-if="item.result == 1">处理中</i>
                <i class="processed" v-if="item.result == 2">已处理</i>
              </p>
            </router-link>
          </li>
        </ul>
        <ul v-show="isCenterIndex==2">
          <li v-for="(item , index) in advisoryItems" :key="index">
            <router-link to>
              <div>{{item.content}}</div>
              <p>
                <span>{{item.time}}</span>
              </p>
            </router-link>
          </li>
        </ul>
        <div class="member-content" v-show="isCenterIndex==3">
          <div class="member-tab-box">
              <span :class="{active:isMemberTab==0}" @click="isMemberTab=0">修改手机号绑定</span>
              <span :class="{active:isMemberTab==1}" @click="isMemberTab=1">修改密码</span>
          </div>
          <div class="member-tab-content">
              <div v-show="isMemberTab==0">
                  <Form v-model="member" :label-width="100">
                      <FormItem label="手机号">
                          <Input v-model="member.tel" />
                      </FormItem>
                       <FormItem label="更换手机号">
                          <Input v-model="member.newTel" />
                      </FormItem>
                      <FormItem label="验证码">
                          <div class="code-box">
                              <Input v-model="member.code" placeholder="请输入验证码"/>
                          <button>获取验证码</button>
                          </div>
                      </FormItem>
                      <FormItem>
                          <button class="submit-button">完成</button>
                      </FormItem>
                  </Form>
              </div>
              <div v-show="isMemberTab==1">
                  <Form v-model="password" :label-width="100">
                      <FormItem label="原密码">
                          <Input v-model="password.oldPwd" />
                      </FormItem>
                      <FormItem label="新密码">
                          <Input v-model="password.newPwd" />
                      </FormItem>
                       <FormItem label="确认密码">
                          <Input v-model="password.surePwd" />
                      </FormItem>
                      <FormItem>
                          <button class="submit-button">完成</button>
                      </FormItem>
                  </Form>
              </div>
          </div>
        </div>
      </div>
    </div>
    <footNav></footNav>
  </div>
</template>

<script>
// import centerNav from '../../components/centerNav/index'
import topNav from "@/components/topNav/index";
import topLogin from "@/components/topLogin/index";
import footNav from "@/components/footNav/index";
// 框架
import {Form,FormItem,Input} from 'view-design'
export default {
  name: "index",
  components: { topNav, topLogin, footNav,Form,FormItem,Input },
  data() {
    return {
      userName: "pear5212",
      isCenterIndex: 2,//左侧菜单是否选中
      isMemberTab:0,//个人信息 tab 是否选中
      advisoryItems: [
        {
          content:
            '管理咨询是针对某一具体而进行的服务活动，一般一次管理咨询都会以一个"项目"的形式确定下来。虽然在前期存在客户不清楚自己究竟在什么方面存在问题的情况，但一般在管理咨询合同签订后项目内容就已经基本确定了。',
          time: "2019-09-10  18:56"
        },
        {
          content:
            '管理咨询是针对某一具体而进行的服务活动，一般一次管理咨询都会以一个"项目"的形式确定下来。虽然在前期存在客户不清楚自己究竟在什么方面存在问题的情况，但一般在管理咨询合同签订后项目内容就已经基本确定了。',
          time: "2019-09-10  18:56"
        },
        {
          content:
            '管理咨询是针对某一具体而进行的服务活动，一般一次管理咨询都会以一个"项目"的形式确定下来。虽然在前期存在客户不清楚自己究竟在什么方面存在问题的情况，但一般在管理咨询合同签订后项目内容就已经基本确定了。',
          time: "2019-09-10  18:56"
        }
      ],
      complaintItems: [
        {
          content:
            '管理咨询是针对某一具体而进行的服务活动，一般一次管理咨询都会以一个"项目"的形式确定下来。虽然在前期存在客户不清楚自己究竟在什么方面存在问题的情况，但一般在管理咨询合同签订后项目内容就已经基本确定了。',
          time: "2019-09-10  18:56",
          result: 0
        },
        {
          content:
            '管理咨询是针对某一具体而进行的服务活动，一般一次管理咨询都会以一个"项目"的形式确定下来。虽然在前期存在客户不清楚自己究竟在什么方面存在问题的情况，但一般在管理咨询合同签订后项目内容就已经基本确定了。',
          time: "2019-09-10  18:56",
          result: 1
        },
        {
          content:
            '管理咨询是针对某一具体而进行的服务活动，一般一次管理咨询都会以一个"项目"的形式确定下来。虽然在前期存在客户不清楚自己究竟在什么方面存在问题的情况，但一般在管理咨询合同签订后项目内容就已经基本确定了。',
          time: "2019-09-10  18:56",
          result: 2
        }
      ],
      member:{
          tel:'13659874664',
          newTel:'',
          code:''

      },
       password:{
           oldPwd:'',
          newPwd:'',
          surePwd:'',
      }
    };
  }
};
</script>

<style scoped lang="scss">
@import "@/assets/css/center";
.center-nav {
  width: 187px;
  padding-top: 30px;
  background: rgba(255, 255, 255, 1);
  .user-avatar {
    display: block;
    width: 65px;
    margin: 0 auto;
  }
  p {
    margin: 24px 0 36px;
    text-align: center;
    font-size: 16px;
  }
  ul {
    li {
      a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 45px;
        color: #999;
        /*background:rgba(229,184,127,1);*/
        /*opacity:0.1;*/
        i {
          img {
            width: 20px;
          }
          &:nth-child(2) {
            display: none;
          }
        }
        span {
          margin-left: 6px;
        }
      }
      &.active {
        a {
          background: rgba(229, 184, 127, 0.1);
          color: $colorEarth;
          i {
            display: none;
            &:nth-child(2) {
              display: block;
            }
          }
          &:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 2px;
            background-color: $colorEarth;
          }
        }
      }
      &:hover {
        a {
          color: $colorEarth;
          i {
            display: none;
            &:nth-child(2) {
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>
